<template>
    <!-- 商品像素画 -->
    <div id="appearance">
        <span id="appearance-topic">商品外观标识(点击刷新)</span>

        <div id="appearance-block" @click="get_color()">
            <div v-for="(row, i) in colors" :key="i" class="ul">
                <div v-for="(item, j) in row" :key="`${i}-${j}`" :id="`M${i}-${j}`" :style="`background-color: ${item};`"></div>
            </div>
        </div>
    </div>

    <form>
        <input type="text" name="name" placeholder="商品名" id="name" v-model="name">
        <input type="number" name="price" placeholder="价格" id="price" step="0.01" min="0" max="999" v-model="price">
        <textarea name="description" id="description" placeholder="商品描述" v-model="description"></textarea>
    </form>

    <div id="submit" @click="api.add_product(name, price, description, colors)">
        生产
    </div>
</template>

<script setup>
import { Api } from '@/assets/js/api';
import { onMounted, ref } from 'vue';

//登录验证保护
const api = new Api();
api.check_session()

//商品获取和操作
const colors = ref();
const name = ref('');
const price = ref();
const description = ref('');

async function get_color(){
    const response = await api.get_random_appearance();
    try{
        colors.value = response['colors'];
    }catch (TypeError){
        console.clear()
    }
}

onMounted(async () => {
    get_color()
})
</script>

<style src="./add.css" scoped></style>